<template>
    <div>
        <pre>
        - 单文件组件在定义样式时，并不限制 style 标签的出现次数
        - 在单文件组件中，提供 ＜style＞ 标签可以完成组件样式的定义 默认是全局样式定义
            !如果需要开启 服务器对编译样式的文件指向描述，方便开发调试，需要手动开启 sourceMap 功能
            !sourceMap 为调试映射地图 -> 为编译后的文件提供一个类似于查找目录的功能，将对应的代码在浏览器中指向开发文件
            !通过修改 vue.config.js 的服务器启动配置，手动开启css的调试功能
            !开发服务器JS的调试功能，默认是开启的
            module.exports = {
                css:{
                    sourceMap:true
                }
            }
        </pre>
        <p class="test-class">测试单文件组件的样式定义 .test-class</p>
        <ChildStyle v-if="flag"></ChildStyle>
        <input type="button" value="切换显示子组件" @click="flag=!flag">
        <pre>
        - 单文件组件，可以通过对 ＜style scoped＞ 标签定义 scoped 属性，完成将样式限制于当前组件的标签上
            ! scoped 通知vue-loader 在解析当前组件时，将定义在具有scoped描述的标签中样式，
            ！统一增加一个随机属性值,构成css的属性选择器
            ! scoped 默认是为样式最后一个选择器进行 随机属性增加 - 如果需要调整位置需要使用 vue-loader 提供样式穿透语法
                样式 >>> 样式
                样式 /deep/ 样式
                样式::v-deep 样式
            <img src="@/assets/06.png" alt="" srcset="">
        </pre>
        <p class="comp-test">测试单文件组件的局部样式 .comp-test</p>
        <ChildStyleTwo class="aaa"></ChildStyleTwo>
        <pre>
        为vue项目的单文件组件增加动态语言支持：less (sass sacc) stylus css
        - 组件中的 style 标签默认识别css语法
        - 在组件定义时，可以使用 ＜style lang="动态样式语言"＞ 描述当前样式使用何种语言
        - 单文件组件中，一个组件是可以定义多种样式语言特性 - 不要在一个项目中使用多种动态样式语法
        - 项目中需要使用 动态语法，必须为项目安装 动态语法加载器
            - less 核心语法包, less-loader 加载器 npm install less@3.0.4 less-loader@5.0.0 -D
        - 如果需要完成为当前vue项目中的所有组件，自动完成动态样式资源文件的加载
            + 需要安装 style-resources-loader -D
            + 可以配合 vue-cli-plugin-style-resources-loader -D 简化 vue.config.js 的相关配置
            + 通过 命令 vue add style-resources-loader 实现快速安装和配置

            因为硬件问题 vue.config.js 加载的动态样式的配置文件修改，可能无法触发热更新
                -> 任选一个组件执行 ctrl+s 强制更新即可
        </pre>
        <p class="less-test">测试less语法
            <span>内部元素选择</span>
        </p>
        <ChildStyleThree></ChildStyleThree>
    </div>
</template>

<script>
import ChildStyle from './components/ChildStyle'
import ChildStyleTwo from './components/ChildStyleTwo'
import ChildStyleThree from './components/ChildStyleThree'

export default {
    components:{
        ChildStyle,ChildStyleTwo,ChildStyleThree
    },
    data(){
        return {
            flag:true
        }
    },
    mounted(){
        console.log(1);
    }
}
</script>

<style>
    .test-class{
        color: tomato;
        background-color: #dedede;
        font-weight: bolder;
    }
</style>

<style scoped>
    .comp-test{
        color: red;
    }
    .aaa{
        background-color: #dedede;
    }
    .aaa::v-deep span{
        color: blue;
    }
</style>
<style lang="less" scoped>
    // 动态样式语法中不能使用别名
    // @import "../../less/var.less";
    // @bc:#dedede;
    // @fc:red;
    .less-test{
        background-color: @bc;
        >span{
            color: @fc;
        }
    }
</style>